<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!-- 留言板 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <link rel="stylesheet" href="../../css/diy.css">
</head>

<body>
<div class="section1">
    <!-- 内容主体区域 -->
    <div class="manu message" style="padding: 15px;">
        <div class="form-input-box-t layui-form-item">
            <%--            <div class="input-box">--%>
            <%--                <label class="layui-form-label">标题</label>--%>
            <%--                <div class="layui-input-block input-i block">--%>
            <%--                    <input type="text" name="title" required lay-verify="required" autocomplete="off"--%>
            <%--                           class="layui-input">--%>
            <%--                </div>--%>
            <%--            </div>--%>
            <div class="input-box">
                <label class="layui-form-label">昵称</label>
                <div class="layui-input-block input-i block">
                    <input type="text" name="nickname" required lay-verify="required" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="buts">
            <button type="button" class="layui-btn layui-btn-normal" id="inquire"><span>查询</span></button>
            <button type="button" class="layui-btn layui-btn-normal" id="reset"><span>重置</span></button>
            <button type="button" class="layui-btn layui-btn-normal" id="delete" style="display: none"><span>删除</span>
            </button>
            <!--      <a href="./view_add.jsp" target="main_self_frame" type="button" class="layui-btn layui-btn-normal" style="display: none" id="add">新增/Add</a>-->
        </div>
    </div>
    <div class="table">
        <table class="layui-hide" id="bulletinBoard" lay-filter="bulletinBoard"></table>

        <script type="text/html" id="barDemo">
            <%--            <button class="layui-btn layui-btn-xs layui-btn-sm" lay-event="detail"><span>详情</span></button>--%>
            {{# if(d.can_reply){ }}
            <button class="layui-btn layui-btn-xs layui-btn-sm" lay-event="reply"><span>回复</span></button>
            {{# } }}
            {{# if(d.has_reply){ }}
            <button class="layui-btn layui-btn-xs layui-btn-sm" lay-event="check_reply"><span>查看回复</span></button>
            {{# } }}
        </script>
    </div>
</div>
<div id="reply_modal" style="display: none;">
    <div style="padding:16px;">
        <textarea id="reply"></textarea>
    </div>
</div>
</body>
<script src="../../layui/layui.js"></script>
<script src="../../js/axios.min.js"></script>
<script src="../../js/index.js"></script>
<script src="../../js/base.js" charset="utf-8"></script>


<script>
    var BaseUrl = baseUrl()
    layui.use(['element', 'layer', 'util', 'layedit'], function () {
        var element = layui.element
            , layer = layui.layer
            , util = layui.util
            , table = layui.table
            , layedit = layui.layedit
            , $ = layui.$;

        let personInfo = JSON.parse(sessionStorage.personInfo)
        let user_group = personInfo.user_group
        let token = sessionStorage.token || null

        // let editor = layedit.build('reply', {
        //   tool: [
        //     'strong' //加粗
        //     , 'italic' //斜体
        //     , 'underline' //下划线
        //     , 'del' //删除/Del线
        //     , '|' //分割线
        //     , 'left' //左对齐
        //     , 'center' //居中对齐
        //     , 'right' //右对齐
        //     , 'link' //超链接
        //     , 'unlink' //清除链接
        //     , 'image' //插入图片
        //     , 'help' //帮助
        //   ]
        // });


        // 权限判断
        /**
         * 获取路径对应操作权限 鉴权
         * @param {String} action 操作名
         */
        function $check_action(path1, action = "get") {
            var o = $get_power(path1);
            if (o && o[action] != 0 && o[action] != false) {
                return true;
            }
            return false;
        }

        let deletes = document.querySelector("#delete")
        // let add = document.querySelector("#add")


        if (user_group == "管理员" || $check_action('/message/table', 'del')) {
            deletes.style.display = "block"
        }
        // if (user_group == "管理员" || $check_action('/message/view')) {
        //   add.style.display = "block"
        // }

        /**
         * 获取权限
         * @param {String} path 路由路径
         */
        function $get_power(path) {
            var list_data = JSON.parse(sessionStorage.list_data)
            var list = list_data;
            var obj;
            for (var i = 0; i < list.length; i++) {
                var o = list[i];
                if (o.path === path) {
                    obj = o;
                    break;
                }
            }
            return obj;
        }

        var path1

        function getpath() {
            var list_data = JSON.parse(sessionStorage.list_data)
            for (var i = 0; i < list_data.length; i++) {
                var o = list_data[i];
                if (o.path === "/message/table") {
                    console.log(o.path);
                    path1 = o.path
                    $get_power(o.path)
                }
            }
        }

        getpath()

        let url = BaseUrl + '/api/message/get_list';

        if (!user_group || user_group === "游客") {
            url = url + "?user_id=0";
        }
        if (user_group !== "管理员") {
            url = url + "?user_id=" + personInfo.user_id;
        }

        let reply = document.querySelector('#reply')


        // 表单
        table.render({
            elem: '#bulletinBoard'
            , toolbar: true
            , url: url
            , headers: {
                'x-auth-token': token,
                'Content-Type': 'application/json'
            },
            limits: [10]
            , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                , groups: 1 //只显示 1 个连续页码
                , first: false //不显示首页
                , last: false //不显示尾页
            },
            cols: [
                [
                    {
                        type: 'checkbox',
                        fixed: 'left'
                    },
                    {
                        field: 'avatar',
                        width: '12%',
                        title: '头像',
                        sort: true,
                        templet: function (d) {
                            return "<div><img src=" + fullUrl(BaseUrl, d.avatar) + "></div>"
                        }
                    },
                    {
                        field: 'nickname',
                        width: '10%',
                        title: '昵称',
                        sort: true
                    },
                    {
                        field: 'content',
                        width: '10%',
                        title: '内容',
                        sort: true
                    },
                    {
                        field: 'create_time',
                        width: '10%',
                        title: '新增时间',
                        sort: true,
                        templet: "<div>{{layui.util.toDateString(d.create_time, 'yyyy-MM-dd HH:mm:ss')}}</div>"
                    },
                    {
                        field: 'update_time',
                        width: '10%',
                        title: '更新时间',
                        sort: true,
                        templet: "<div>{{layui.util.toDateString(d.update_time, 'yyyy-MM-dd HH:mm:ss')}}</div>"
                    },
                    {
                        field: 'operate',
                        width: '20%',
                        title: '操作',
                        sort: true,
                        fixed: 'right',
                        toolbar: '#barDemo'
                    }
                ]
            ],
            page: true,
            request: {
                limitName: 'size'
            },
            response: {
                statusName: 'code', //规定返回/Back的状态码字段为code
                statusCode: 200 //规定成功的状态码味200
            },
            parseData: function (res) {
                for (let i = 0; i < res.result.list.length; i++) {
                    res.result.list[i].has_reply = false
                    res.result.list[i].can_reply = false
                    if (res.result.list[i].reply_state) {
                        res.result.list[i].has_reply = true
                    } else {
                        if (user_group === '管理员') {
                            res.result.list[i].can_reply = true
                        }
                    }
                }
                return {
                    "code": 200,
                    "msg": "",
                    "count": res.result.count,
                    "data": res.result.list
                }
            },
            where: {like: 0, size: 10}
        });

        //监听行工具事件
        table.on('tool(bulletinBoard)', function (obj) {
            let data = obj.data;
            let layEvent = obj.event
            if (layEvent === 'detail') {
                // window.location.href = "./view_detail.jsp?" + data.message_id;
                layopen_dateil("./view_detail.jsp?" + data.message_id)
            } else if (layEvent === 'check_reply') {
                // window.location.href = "./view_reply.jsp?" + data.message_id;
                // layedit.setContent(editor, data.reply)
                reply.innerHTML = data.reply;
                layer.open({
                    type: 1,
                    shade: false, // 不显示遮罩
                    area: ['800px', '520px'],
                    content: '<div style="padding: 16px;font-size: xxx-large;">' + data.reply + '</div>',
                    title: '查看回复',
                    btn: ['关闭']
                });
            } else {
                // layedit.setContent(editor, data.reply)
                reply.innerHTML = data.reply;
                layer.open({
                    type: 1,
                    shade: false, // 不显示遮罩
                    title: '回复',
                    content: $('#reply_modal'), // 捕获的元素
                    btn: ['确定', '关闭'],
                    yes: async function (index, layero, that) {
                        const {data: res} = await axios.post(BaseUrl + "/api/message/set?message_id=" + data.message_id,
                            {
                                reply: reply.value,
                                reply_state: 1
                            }, {
                                headers: {
                                    'x-auth-token': token,
                                    'Content-Type': 'application/json'
                                }
                            })
                        if (res.result == 1) {
                            layer.close(index);
                            location.reload()
                        }
                    }
                });
            }
        });

        // 请求参数：

        let request = {like: 0, size: 10, page: 1, title: '', nickname: '', orderby: 'create_time desc'}

        // 重置/Reset参数
        let resetName = {like: 0, size: 10, page: 1}
        fun('bulletinBoard', BaseUrl + '/api/message/del', 'message_id', request, resetName)

    })
</script>

</html>
